{% extends 'base.html' %}

{% block title %}
    <title>登录</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="https://unpkg.com/mobi.css/dist/mobi.min.css">
{% endblock %}

{% block content %}
    <div class="flex-center">
        <div class="container">
            <div class="flex-center">
                <div class="unit-1-2 unit-1-on-mobile">
                    <h3 style="text-align: center">登录</h3>
                    <form class="form" action="." method="post">
                        {# 错误信息弹窗 #}
                        {% if messages %}
                            <script type="text/javascript">
                                {% for msg in messages %}
                                    alert('{{ msg.message }}');
                                {% endfor %}
                            </script>
                        {% endif %}
                        {% csrf_token %}
                        {# 用户名 #}
                        <div class="form-group">
                            {{ login_form.username.label_tag }}
                            {{ login_form.username }}
                        </div>
                        {# 密码 #}
                        <div class="form-group">
                            {{ login_form.password.label_tag }}
                            {{ login_form.password }}
                        </div>
                        {# 验证码 #}
                        <div class="form-group">
                            {{ login_form.captcha.errors }}
                            {{ login_form.captcha.label_tag }}
                            {{ login_form.captcha }}
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                    </form>
                    <div class="flex-left top-gap text-small">
                        <div class="unit-2-3">
                            <span>没有账号？<a href="{% url 'login:register' %}" style="color: #267fd9">立即注册</a></span>
                        </div>
                        <div class="unit-1-3 flex-right">
                            <span><a href="{% url "password_reset_recover" %}" style="color: #267fd9">忘记密码？</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function () {
            // Add refresh button after field (this can be done in the template as well)
            $('img.captcha').after(
                $('<a class="captcha-refresh" style="color: #267fd9; text-decoration: underline; margin-left: 16px">看不清</a>')
            );

            $('.captcha-refresh').click(function () {
                $.getJSON("/captcha/refresh/", function (result) {
                    $('.captcha').attr('src', result['image_url']);
                    $('#id_captcha_0').val(result['key'])
                });
            });
        });
    </script>
    <style>
        .errorlist {
            color: red;
        }
    </style>
{% endblock %}
